<template>
  <q-page padding>
    <!-- content -->
    <!-- 现在我们要寻找用户了，应该怎么办呢 -->
    <div class="q-pb-md">
      输入查询关键字，将为你推荐相关同学，点击条目查看更多信息。
    </div>
    <q-form style="max-width: 400px" @submit="onSubmit" class="q-gutter-md q-ma-md">
      <q-input outlined v-model="tagname" label="查找队友（输入他的技术特征）" />
      <q-btn label="查询" type="submit" color="primary"/>
    </q-form>

    <q-list bordered>
      <template v-for="(tag, idx) in this.taglist" :key="idx">
        <template v-for="(user, idxx) in tag.users" :key="idxx">
          <q-item clickable v-ripple >
            <q-item-section avatar>
              <y-auto-head-icon :user="user" imgBase="test/" />
            </q-item-section>

            <q-item-section>
              <div class="text-caption">{{user.uid}}-{{user.name}}</div>
              <div class="text-caption">竞赛经历：
                <template v-for="cert in user.certs" :key="cert">
                  <span>{{"[" + cert.cate.name + "]"}}</span>
                </template>
              </div>
              <div class="text-caption">相关标签：
                <template v-for="t in user.usertag_set" :key="t">
                <q-chip  color="primary" text-color="white">
                  {{t.name}}
                </q-chip>
                </template>
              </div>
            </q-item-section>

          </q-item>
          <q-separator />
        </template>
      </template>

    </q-list>

  </q-page>
</template>

<script>
import { Notify } from 'quasar'
import yAutoHeadIcon from 'src/components/y-auto-head-icon.vue'

export default {
  components: { yAutoHeadIcon },
  name: 'FindPeople',

  data () {
    return {
      tagname: '',
      taglist: []
    }
  },

  methods: {
    onSubmit () {
      if (!this.tagname) {
        Notify.create('字段不能为空')
        return
      }
      this.$axios.get('api/usertags/?name=' + this.tagname)
        .then((response) => {
          Notify.create('查询完成！共找到' + response.data.length + '条信息')
          this.taglist = response.data
          // 我们要把竞赛列表填写进去
          for (let i = 0; i < this.taglist.length; i += 1) {
            const users = this.taglist[i].users
            for (let j = 0; j < users.length; j += 1) {
              this.$axios.get(`api/certs/?user=${users[j].uid}&all_accept=True&format=json`)
                .then((response) => {
                  this.taglist[i].users[j].certs = response.data
                })
            }
          }
        })
        .catch(error => {
          Notify.create('查询失败！原因：' + error.response.data)
        })
    }
  }
}
</script>
